
<script setup>
import { onMounted, onUnmounted, defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const emit = defineEmits(['map-ready']);

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "a2695de3f58ba1ed6e8223336048cc46	",
  };
  AMapLoader.load({
    key: "66dc7b43fc69dbdafcf288e1e44ac144", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D",     // 是否为3D地图模式
        zoom: 13,           // 初始化地图级别（11级适合城市级展示）
        center: [119.306239, 26.075302], // 福州市中心坐标
      });
      
      // 地图初始化完成，通知父组件
      emit('map-ready', map);
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
  height:calc(100vh - 180px);
  border: 2px dashed var(--primary-color);
}
</style>


<!-- <script>
import MapScenicView from './MapScenicView.vue'
export default {
  name: 'MapContainer',
  components: {
    MapScenicView
  }
}
</script> -->

<!-- <script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "替换为你申请的 key", //申请好的 Web 端开发 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    AMapUI: {
      //是否加载 AMapUI，缺省不加载
      version: "1.1", //AMapUI 版本
      plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
    },
    Loca: {
      //是否加载 Loca， 缺省不加载
      version: "2.0", //Loca 版本
    },
  })
    .then((AMap) => {
      var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
      map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script> -->

<!-- <style scoped>
.map-container {
  flex: 1;
  background: #2c3e50;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5rem;
}

.map-placeholder {
  text-align: center;
  padding: 20px;
}

.map-placeholder i {
  font-size: 3rem;
  margin-bottom: 15px;
  color: var(--accent-color);
}

.map-placeholder p:last-child {
  font-size: 1rem;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .map-container {
    height: 400px;
  }
}
</style> -->


<!-- <style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style> -->